<template>
  <div class="midDialog h_p100 w_p100 c-dialogbg">
    <div class="contentBox h_p100 w_p100">
      <div class="box">
        <div class="header flex-between">
          <div class="title">{{title}}</div>
          <img src="@/assets/components/close.png" alt="" class="close cp" @click="closeDialog">
        </div>
        <div class="content">
          <slot />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      require: String,
      default: '弹框'
    }
  },
  data () {
    return {
      showDialog: false
    }
  },
  methods: {
    closeDialog () {
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
  .midDialog{
    position: fixed;
    left: 0;
    z-index: 999;
    top: 0;
    .contentBox{
      position: relative;
      .box{
        background-color: #fff;
        border-radius: 8px;
        width: 580px;
        height: 460px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        padding: 18px 24px;
        .header{
          height: 24px;
          .title{
            height: 24px;
            color: #333333;
            font-size: 16px;
            font-family: PingFangSC, PingFangSC-Medium;
            font-weight: 500;
            line-height: 24px;
          }
          img.close{
            height: 24px;
            width: 24px;
          }
        }
        .content{
          height: calc(100% - 24px);
        }
      }
    }
  }
</style>
